var person = 236, //昨日下载量
    reader = 8658236, //累计下载量
    rectNumTimer=null,
    Chart2 = null,//下面折线图
    ChartTimer2 = null,
    chartIndex2 = 0,
    chartLoopTime2 = 12,
    HZ=myexplorer(),
    XAxis=[],///借出x轴数据
    seriesData1=[],///借出数据
    initArr=[
        //{"date":"11月19日","borrowOut":865,"borrowIn":963},
        //{"date":"11月12日","borrowOut":963,"borrowIn":842},
        //{"date":"11月11日","borrowOut":802,"borrowIn":1023},
        //{"date":"11月10日","borrowOut":844,"borrowIn":1200},
        //{"date":"11月09日","borrowOut":999,"borrowIn":1111},
        //{"date":"11月08日","borrowOut":1000,"borrowIn":1023},
        //{"date":"11月07日","borrowOut":888,"borrowIn":1023},
    ];////模拟后台返回的数据结构

window.onresize = function() {
    getRem(100, 1238);
    winW = $(window).width();
    ///两个网格
    drawGrid($(".grid_box").eq(0), "#f0ff00");
    drawGrid($(".grid_box").eq(1), "#00fe88");
    ///折线
    Chart2.setOption(getOption2(), true);
    Chart2.resize();
};
window.onload = function() {
    getRem(100, 1238);
    winW = $(window).width();
    createInitData(1000,800,initArr);/////补齐前面的数据
    rectNumMove();
    new CountUp($(".textContent .person"), 0, person, 0, 2).start();
    new CountUp($(".textContent .reader"), 0, reader, 0, 2).start();
    //两个网格
    drawGrid($(".grid_box").eq(0), "#f0ff00");
    drawGrid($(".grid_box").eq(1), "#00fe88");
    ////近七日下载趋势折线
    Chart2 = echarts.init(document.getElementById('chart2'));
    Chart2.setOption(getOption2(), true);
    chart_move2();

};
function getW(num) {
    return num * winW / 1238;
}
function drawGrid(box, color) {
    box.find("canvas").remove();
    var c = $("<canvas class='grid_canvas'></canvas>")[0];
    box.append(c);
    var w = c.width = box.width(),
        h = c.height = box.height(),
        ctx = c.getContext('2d'),
        opts = {
            len: getW(13),
            count: 100,
            baseTime: 10,
            addedTime: 10,
            dieChance: .05,
            spawnChance: 1,
            sparkChance: .1,
            sparkDist: 10,
            sparkSize: 0,
            color: color,
            baseLight: 50,
            addedLight: 10, // [50-10,50+10]
            shadowToTimePropMult: 0,
            baseLightInputMultiplier: .01,
            addedLightInputMultiplier: .02,

            cx: w / 2,
            cy: h / 2,
            repaintAlpha: .04,
            hueChange: .1
        },

        tick = 0,
        lines = [],
        dieX = w / 2 / opts.len,
        dieY = h / 2 / opts.len,

        baseRad = Math.PI * 2 / 4;

    ctx.fillStyle = '#000';
    ctx.fillRect(0, 0, w, h);

    function loop() {
        if(!!box.timer) cancelAnimationFrame(box.timer)
        ++tick;
        ctx.globalCompositeOperation = 'source-over';
        ctx.shadowBlur = 0;
        ctx.fillStyle = 'rgba(0,0,0,alp)'.replace('alp', opts.repaintAlpha);
        ctx.fillRect(0, 0, w, h);
        ctx.globalCompositeOperation = 'lighter';

        if(lines.length < opts.count && Math.random() < opts.spawnChance)
            lines.push(new Line);

        lines.map(function(line) {
            line.step();
        });
        box.timer = window.requestAnimationFrame(loop);
    }

    function Line() {
        this.reset();
    }
    Line.prototype.reset = function() {

        this.x = 0;
        this.y = 0;
        this.addedX = 0;
        this.addedY = 0;

        this.rad = 0;

        this.lightInputMultiplier = opts.baseLightInputMultiplier + opts.addedLightInputMultiplier * Math.random();
        this.color = opts.color.replace('hue', tick * opts.hueChange);
        this.cumulativeTime = 0;
        this.beginPhase();
    }
    Line.prototype.beginPhase = function() {

        this.x += this.addedX;
        this.y += this.addedY;

        this.time = 0;
        this.targetTime = (opts.baseTime + opts.addedTime * Math.random()) | 0;

        this.rad += baseRad * (Math.random() < .5 ? 1 : -1);
        this.addedX = Math.cos(this.rad);
        this.addedY = Math.sin(this.rad);

        if(Math.random() < opts.dieChance || this.x > dieX || this.x < -dieX || this.y > dieY || this.y < -dieY)
            this.reset();
    }
    Line.prototype.step = function() {

        ++this.time;
        ++this.cumulativeTime;

        if(this.time >= this.targetTime)
            this.beginPhase();

        var prop = this.time / this.targetTime,
            wave = Math.sin(prop * Math.PI / 2),
            x = this.addedX * wave,
            y = this.addedY * wave;

        ctx.shadowBlur = prop * opts.shadowToTimePropMult;
        ctx.fillStyle = ctx.shadowColor = this.color.replace('light', opts.baseLight + opts.addedLight * Math.sin(this.cumulativeTime * this.lightInputMultiplier));
        ctx.fillRect(opts.cx + (this.x + x) * opts.len, opts.cy + (this.y + y) * opts.len, 0.5, 0.5);
        if(Math.random() < opts.sparkChance)
            ctx.fillRect(opts.cx + (this.x + x) * opts.len + Math.random() * opts.sparkDist * (Math.random() < .5 ? 1 : -1) - opts.sparkSize / 2, opts.cy + (this.y + y) * opts.len + Math.random() * opts.sparkDist * (Math.random() < .5 ? 1 : -1) - opts.sparkSize / 2, opts.sparkSize, opts.sparkSize)
    }
    loop();
}
//2个网格数字滚动
var rectNumIndex = 0,
    rectNumLoopTime = 10; //顶部两数字滚动重汇时间间隔
function rectNumMove() {
    if(!!window.rectNumTimer) cancelAnimationFrame(window.rectNumTimer);
    if(rectNumIndex >= (rectNumLoopTime * HZ)) {
        rectNumIndex = 0;
        new CountUp($(".textContent .person"), 0, person, 0, 2).start();
        new CountUp($(".textContent .reader"), 0, reader, 0, 2).start();
    }
    rectNumIndex++;
    window.rectNumTimer = requestAnimationFrame(rectNumMove);
}
////折线图动效
function chart_move2() {
    if(!!window.ChartTimer2) cancelAnimationFrame(window.ChartTimer2);
    if(chartIndex2 >= (chartLoopTime2 * HZ)) {
        chartIndex2 = 0;
        Chart2.dispose();
        Chart2 = echarts.init(document.getElementById('chart2'));
        Chart2.setOption(getOption2(), true);
    }
    chartIndex2++;
    window.ChartTimer2 = requestAnimationFrame(chart_move2);
}
//折线图配置项
function getOption2() {
    return {
        backgroundColor:'rgba(174,132,240,.1)',//rgba设置透明度0.1
        title: {
            text: '近七日下载趋势',
            x:"center",
            textStyle: {
                color: '#fff',
                fontSize:getW(22),
                fontWeight:'100',
            },
            padding: [getW(25), 0, 0, 0]
        },
        tooltip: {
            trigger: 'axis',
            show: false
        },
        grid: {
            x: '9%',
            x2: '4%',
            y: '18%',
            y2: '10%'
        },
        color: ['#f0ff00'], ///借出还入曲线颜色
        calculable: true,
        xAxis: {
            type: 'category',
                //name: '9月',
                //nameLocation: 0,
                //nameTextStyle: {
                //    color: '#fff',
                //    fontSize: 16
                //},
            boundaryGap:true,
            axisLine: {
                show:true,
                lineStyle: {
                    color: 'rgba(0,254,136,.5)',
                    width: 1
                },
                onZero: true
            },
            splitLine: {
                show: false,
                lineStyle: {
                    color: 'rgba(232,232,232,0.3)'
                },
            },
            axisLabel: {
                interval: 0,
                textStyle: {
                    color: '#fff',
                    fontSize: getW(16),
                }
            },
            //data: ["9月23日","9月24日","9月25日","10月1日","10月2日","10月3日","10月4日"]
            data: XAxis

        },
        yAxis: [{
            type: 'value',
//                offset:40,
            axisLine: {
                show:true,
                lineStyle: {
                    color: 'rgba(0,254,136,.5)',
                    width: 1
                }
            },
            axisTick: {
                show: false
            },
            boundaryGap: false,
            splitLine: {
                show:true,
                lineStyle: {
                    color: 'rgba(232,232,232,0.4)'
                }
            },
            axisLabel: {
                show: true,
                formatter: '{value}',
                textStyle: {
                    color: '#fff',
                    fontSize:getW(16),
                }
            }
        }],
        series: [{
            name: '借出趋势',
            type: 'line',
            symbolSize: getW(6),
//                smooth: true,
            symbol: "",
            areaStyle: {// 设置折线下面的面积颜色
                normal: {
                    // 后面有6个参数
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
                        [{offset: 0, color: 'rgba(240,255,0,0.5)'  },// 0% 处的颜色
                            {offset: 1, color: 'rgba(240,255,0,0.05)' }// 100% 处的颜色
                        ], false)
                }
            },
            label: {
                normal: {
                    show: true,
                    position: 'top',
                    textStyle: {
                        fontSize: getW(16),
                    }
                }
            },
            animationDelay: function(idx) {
                return idx * 10 + 100;
            },
            itemStyle: {
                normal: {
                    lineStyle: {
                        type: 'solid'
                    }
                }
            },
            data: seriesData1
        },
        ]
    };
}
///构造初始化数据  maxNum模拟数据最大值, minNum模拟数据最小值
function createInitData(maxNum,minNum,initArr){
    ///如果返回的数据小于7条就执行初始好功能
    if(initArr.length<7){
        console.log('折线图小于七条开始补数据');

        for (var i =7; i >initArr.length; i--) {
            console.log(getBeforeDate(-i));
            var borrowOut = parseInt(Math.random() * (maxNum - minNum+ 1) + minNum);///产生随机数
            XAxis.push(getBeforeDate(-i));
            seriesData1.push(borrowOut);
        }
    }
    for (var j = 0; j <initArr.length; j++) {
        XAxis.push(initArr[j].date);///x轴名字
        seriesData1.push(initArr[j].borrowOut);///借出数据
    }
}



